<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>拓深科技</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="assets/ionicons-2.0.1/css/ionicons.min.css" rel="stylesheet"/>
    <link href="assets/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet"/>
    <link href="assets/AdminLTE/dist/css/skins/_all-skins.min.css" rel="stylesheet"/>
    <link href="assets/vakata-jstree-7a976d1/dist/themes/default/style.min.css" rel="stylesheet"/>
    <link href="assets/jQuery-File-Upload-9.12.3/css/jquery.fileupload.css" rel="stylesheet"/>
    <link href="assets/jQuery-File-Upload-9.12.3/css/jquery.fileupload-ui.css" rel="stylesheet"/>
    <link href="assets/images/log.ico" rel="shortcut icon">
    <link href="assets/ipicture/css/iPicture_location.css" rel="stylesheet" media="screen"/>
</head>
<body class="hold-transition skin-red sidebar-mini">
<div class="wrapper">
    <!--顶部导航栏开始-->
    <header id="top_header" class="main-header">
        <!-- Logo -->
        <a href="#" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>T</b>pson</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>T</b>PSON</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">

                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!--<img src="assets/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
                            <span class="hidden-xs">Administrator</span>
                        </a>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                </ul>
            </div>
        </nav>
    </header>
    <!--顶部导航栏结束-->
    <!--右侧导航栏开始-->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul id="side_bar" class="sidebar-menu">
                <li class="header">导航栏</li>
                <li class="treeview">
                    <a href="main_page.html">
                        <i class="fa fa-dashboard text-red"></i>
                        <span>主页</span>
                    </a>
                </li>

                <li class="treeview">
                    <a href="alert_log.html">
                        <i class="fa fa-warning text-red"></i>
                        <span>报警记录</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="map_show.html">
                        <i class="fa fa-map-marker text-red"></i>
                        <span>地图展示</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-cog text-red"></i>
                        <span>设备管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <!--<li><a href="router_status.html"><i class="fa fa-circle-o text-yellow"></i>设备状态 </a> </li>-->
                        <li><a href="router_config.html"><i class="fa fa-circle-o text-yellow"></i>设备配置 </a> </li>
                    </ul>
                </li>
                <li class="treeview active">
                    <a href="#">
                        <i class="fa fa-chain-broken text-red"></i>
                        <span>监测点配置</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o text-red"></i>地图配置 </a> </li>
                        <li><a href="monitor_config_sensor_type_input.html"><i class="fa fa-circle-o text-yellow"></i>传感器类别设置 </a> </li>
                        <li><a href="monitor_config_monitor_input.html"><i class="fa fa-circle-o text-yellow"></i>监测点配置 </a> </li>
                        <li><a href="monitor_config_export.html"><i class="fa fa-circle-o text-yellow"></i>数据导入导出 </a> </li>
                    </ul>
                </li>

                <li id="sys_log" class="treeview">
                    <a href="show_log.html">
                        <i class="fa fa-files-o text-red"></i>
                        <span>系统日志</span>
                    </a>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <!--右侧导航栏结束-->
    <!--内容区开始-->
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                <b>地图配置</b>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li><a href="#"><i class="fa fa-chain-broken"></i> 监测点配置</a> </li>
                <li><a href="#"><i class="fa fa-circle-o"></i> 地图配置</a></li>
            </ol>
        </section>

        <!--<div class="pad margin no-print">-->
        <!--<div class="callout callout-info" style="margin-bottom: 0!important;">-->
        <!--<h4><i class="fa fa-info"></i> 提示：</h4>-->
        <!--录入或修改地理位置信息。-->
        <!--</div>-->
        <!--</div>-->

        <section class="invoice">
            <div class="row">
                <div class="col-md-3">
                    <div class="box box-warning">
                        <div class="box-header">
                            <h4 class="box-title"><b>当前区域数据</b></h4>
                        </div>
                        <div class="box-body">
                            <div id="loction_tree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div id="loction_setting" class="box box-warning">
                        <div class="box-header">
                            <h4 class="box-title"><b>地理信息设置</b></h4>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="box box-success">
                                    <div class="box-body">
                                        <div class="row">
                                            <div class="col-sm-2"><input id="photoCover" class="input-large" type="text" style="height:33px;" disabled></div>
                                            <div class="col-sm-2"  >
                                                <form id="fileForm" action="" method="post" enctype="multipart/form-data"   target="frameFile" >
                                                <span class="btn btn-info fa fa-folder-open   fileinput-button">
                                                    <!--<i class="glyphicon glyphicon-plus"></i>-->
                                                    <span>打开地图</span>
                                                    <input id="map_file" type="file" multiple  name="file" accept="image/jpeg,image/png">
                                                </span>
                                                    <input id="submit" name="submit" type="submit" style="display: none">
                                                </form>
                                                <iframe id="frameFile" name="frameFile" style="display: none;"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="clearfix"></div>
    </div><!-- /.content-wrapper -->
    <!--内容区结束-->
    <!--页脚开始-->
    <footer class="main-footer no-print">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0
        </div>
        <strong>Copyright &copy; 2015-2016 <a href="#">拓深科技</a>.</strong> All rights reserved.
    </footer>
    <!--页脚结束-->
</div>

<script src="assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/fastclick/fastclick.min.js"></script>
<script src="assets/AdminLTE/dist/js/app.min.js"></script>
<script src="assets/AdminLTE/dist/js/demo.js"></script>
<script src="assets/vakata-jstree-7a976d1/dist/jstree.min.js"></script>
<script src="assets/layer-v2.2/layer/layer.js"></script>
<script src="assets/cxSelect-master/js/jquery.cxselect.min.js"></script>
<script src="assets/layer-v2.2/layer/layer.js"></script>
<script src="assets/ipicture/js/jquery.ipicture_location.js"></script>
<script src="js/alert_check.js"></script>
<script>
    var server = "http://192.168.3.222:8080";
    var mapId;
    var data = [];
    $(function () {
//        init();
//        socketInit();
    });
    function getObjectURL(file) {
        //获取图片路径
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //图片预览
    $('input[id=map_file]').change(function() {
        var mp = $('#photoCover');
        mp.val($(this).val());
        if(mp.val() != null){
            var objUrl = getObjectURL(this.files[0]) ;
            if (objUrl) {
                layer.open({
                    type:1,
                    area: ['800px', '600px'],
                    title: '地图上传',
                    skin:'layui-layer-lan',
                    content:'<div class="row"><div id="map_div_layer" ></div></div>',
                    btn:['确认上传','误报','取消'],
                    btn1:function (index, layero) {
                        console.log("确认");
                        layer.close(index);
//                        var formData = new FormData($("#fileForm")[0]);
//                        $.ajax({
//                            async: false,
//                            cache: false,
//                            contentType: false,
//                            processData: false,
//                            url:server +"/xk/xkGeoLocation/mapUpload?id="+4,
//                            type:"post",
//                            data:formData,
//                            success:function(data){
//                                console.log("success");
//                                layer.close(index);
//                            },
//                            error:function(data){
//                                console.log("error");
//                                layer.close(index);
//                            }
//                        })
                    },
                    btn2:function(index, layero){
                        console.log("误报");
                        layer.close(index);
                    },
                    btn3:function (index, layero) {
                        console.log("关闭");
                        $('#rest').attr('disabled', true);
                        $('#upload').attr('disabled', true);
                        $('#map_div').empty();
                        $('#map_file').val(null);
                        $('#photoCover').val(null);
                        layer.close(index);
                    },

                    success:function(){
                        $('#map_div_layer').empty();
                        var img = '<img id="show_map" class="col-sm-12" src="'+objUrl+'" />';
                        $('#map_div_layer').append(img);
                        mp.val(objUrl);
                        $('#rest').attr('disabled', false);
                        $('#upload').attr('disabled', false);

                    }
                })

            }
        }
    });
    //重置按钮
    $('#rest').click(function(e){
        $('#rest').attr('disabled', true);
        $('#upload').attr('disabled', true);
        $('#map_div').empty();
        $('#map_file').val(null);
        $('#photoCover').val(null);
    });
    //图片显示
    function loadServerMap(id) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img id="show_map" class="col-sm-12" style="width: 100%;height: 100%" src="'+server+'/xk/xkGeoLocation/mapDownload?id='+id+'" />'
        });
    }


    function clear() {
        $('#loction_tree').empty();
    }

</script>
</body>
</html>